<!DOCTYPE html>
<html data-dpr="1" style="font-size: 39px;">

<head>

    {include file="common/meta2" /}
    {include file="common/meta3" /}

    <link rel="stylesheet" type="text/css" href="/assets/css2/font-awesome.min.css">
    <script src="/assets/js2/upload_img2.js"></script>
    <script src="/assets/js2/picker.min.js"></script>
    <style>
        .ewm_top_bar {
            height: 3rem;
        }

        .ewm_con_bar {
            position: relative;
            top: -1.8rem;
            padding: 0px 1rem;
            width: 100%;
        }

        .ewm_con {
            background: #fff;
            box-shadow: 0 0 8px #f5f5f5;
            overflow: hidden;
        }

        .ewm_btn {
            width: 4.4rem;
            height: .96rem;
            line-height: .96rem;
            color: #fff;
            text-align: center;
            -webkit-border-radius: .48rem;
            border-radius: .48rem;
            font-size: .4rem;
        }
    </style>
    <style>
        .input_file {
            position: absolute;
            z-index: 2;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            opacity: 0;
            width: 100%;
        }

        .btn-back {
            color: #666;
            line-height: 40px;
            font-size: 16px;
            text-decoration: none;
            padding-top: 3rem;
        }

        .container {
            width: 80%;
            position: relative;
            margin: 0px auto;
        }

        .img-container {
            width: 100%;
            margin-top: 3rem;
            text-align: center;
            position: absolute;
        }

        .img-container img {
            max-width: 100%;
        }

        .footer {
            width: 100%;
            height: 1.17rem;
            position: absolute;
            bottom: 0px;
        }

        .toolbar {
            height: 30px;
            margin: 0px auto;
            text-align: center;
            font-size: 0.33rem;
        }

        .toolbar span {
            background: rgba(255, 69, 0, 0.68);
            color: #fff;
            padding: 0.16rem 0.26rem;
            border-radius: 3px;
            margin-right: 10px;
        }

        .toolbar span#up-btn-submit {
            padding: 0.12rem 0.26rem;
        }
    </style>
</head>

<body class="jui_bg_grey" style="font-size: 12px;">
    <!-- 头部 -->
    <div class="jui_top_bar">
        <a class="jui_top_left" href="javascript:history.back(-1)"><img src="/assets/img2/back_111.png"></a>
        <div class="jui_top_middle">橱窗地址</div>
    </div>
    <!-- 头部end -->
    <!-- 主体 -->
    <div class="ewm_top_bar jui_bg_zhuse"></div>
    <div class="jui_flex_col jui_flex_items_center">
        <form action="">
            <div class="ewm_con_bar" style="padding: 0px 0.3rem;width:360px">
                <div class="ewm_con jui_bor_rad_5 jui_flex_col_center">
                    <div class="jui_h20"></div>
                    <h3>橱窗地址</h3>
                    <div class="jui_h12"></div>
                    <p class="jui_fc_999">填写视频橱窗地址</p>
                    <div class="jui_h20"></div>
                    <div class="jui_pad_12">
                        <div class="" style=" width: 100%;text-align: center;">
                            <p>选择橱窗二维码</p>
                        </div>
                        <div class="sqdp_upimg" style=" width: 100%;text-align: center;">
                            <div id="preview">
                                <img id="imghead" border="0" src="/assets/img2/upimg1.jpg" onclick="$('#previewImg').click();" >
                            </div>
                            <input type="file" onchange="previewImage(this)" style="display:none;" id="previewImg" name="s_img">
                        </div>
                        <img id="image" style="width:200px" src="/assets/img2/202411141731588027768.jpeg">
                        <!--textarea name="chuchuang" id="chuchuang" style="width:5.8rem; height:60px;word-break: break-all; padding:.2rem; font-size:12px;    border: 1px #eee solid;" >./static/upload/202411141731588027768.jpeg</textarea-->
                    </div>
                    <div class="ewm_btn jui_bg_zhuse" id="up-btn-submit">保存</div>
                    <div class="jui_h30"></div>
                </div>
            </div>
        </form>
        <div>轻创优选</div>
    </div>
    <script language="javascript">


        $(function () {
            $('#up-btn-submit').click(function () {

                var previewImg = $('#previewImg').val();
                if (previewImg.trim() == '') {
                    layer.msg('择橱窗二维码');
                    return;
                }

                var xxx = new FormData(document.querySelector("form"));

                $.ajax('?m=user&c=savechuchuang', {
                    method: 'POST', data: xxx, processData: false, contentType: false,
                    success: function (data) {
                        if (data.code == 1) {
                            layer.msg(data.msg);
                        } else {
                            layer.msg(data.msg);
                        }
                    }, dataType: 'json'
                });
            });
        });

        /*	$(function(){
            $('.ewm_btn').click(function(){
                 
                var chuchuang	 = $('#chuchuang').val();
                if(chuchuang.trim()==''){
                    layer.msg('请填写视频橱窗地址');return;
                }
            	
                    $.post("?m=user&c=savechuchuang",{chuchuang:chuchuang},function(ret){
                    if(ret.code==1){
                        layer.msg(ret.msg);
                        window.location.href='?m=user&c=index';	
                    }else{
                        layer.msg(ret.msg);
                    }
                },'json');
            	
            	
                 
            });
        });*/
    </script>

    <script language="javascript">
        var image = document.getElementById('image');
        var input = document.getElementById('input');
        var cropper;
        input.addEventListener('change', function (e) {
            if (typeof (cropper) != 'undefined') {
                cropper.destroy();
                cropper = null;
            }
            var files = e.target.files;
            var done = function (url) {
                input.value = '';
                image.src = url;
                cropper = new Cropper(image, {
                    aspectRatio: 1,
                    cropBoxResizable: false, // 禁止用户调整裁剪框的宽高
                    zoomable: false, // 禁止缩放图片
                    dragMode: 'none' // 禁止重新框选选取

                });

            };
            var reader;
            var file;
            var url;
            if (files && files.length > 0) {
                file = files[0];
                if (URL) {
                    done(URL.createObjectURL(file));
                } else if (FileReader) {
                    reader = new FileReader();
                    reader.onload = function (e) {
                        done(reader.result);
                    };
                    reader.readAsDataURL(file);
                }
            }
        });
        $('#up-btn-left').on('click', function () {
            if (typeof (cropper) != 'undefined') {
                cropper.rotate(90);
            }
        });
        $('#up-btn-right').on('click', function () {
            if (typeof (cropper) != 'undefined') {
                cropper.rotate(-90);
            }
        });
        document.getElementById('up-btn-submit').addEventListener('click', function () {
            var initialAvatarURL;
            var canvas;
            if (cropper) {
                canvas = cropper.getCroppedCanvas({
                    width: 460,
                    height: 360,
                });
                canvas.toBlob(function (blob) {
                    var formData = new FormData();
                    formData.append('headimg', blob, 'avatar.jpg');
                    $.ajax('?m=user&c=savechuchuang', {
                        method: 'POST', data: formData, processData: false, contentType: false,
                        success: function (data) {
                            if (data.code == 1) {
                                layer.msg(data.msg, { icon: 1, time: 1000 }, function () {
                                    window.location.href = '?m=user&c=index';
                                });
                            } else {
                                layer.msg(data.msg);
                            }
                        }, dataType: 'json'
                    });
                });
            } else {
                alert('请先选择图片');
            }
        });
    </script>
</body>

</html>